<template>
    <div class="app-container">

          <!-- 搜索条件 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="ID">
        <el-input v-model="searchParams.id" placeholder="请输入ID"></el-input>
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="searchParams.username" placeholder="请输入负责人"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchParams.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="店铺名称">
        <el-input v-model="searchParams.storeName" placeholder="请输入店铺名称"></el-input>
      </el-form-item>

      <el-form-item label="法人">
        <el-input v-model="searchParams.legalPerson" placeholder="请输入法人"></el-input>
      </el-form-item>

      <el-form-item label="审核时间">
        <el-date-picker
          v-model="searchParams.recentAuditDate"
          type="date"
          placeholder="审核时间"
          
        ></el-date-picker>
        <!-- value-format="yyyy-MM-dd"  -->
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="searchParams.stateId" placeholder="请选择状态">
          <el-option
            v-for="item in stateList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-select v-model="searchParams.latestSubmissionTime" placeholder="请选择提交时间" @change="handleSpecificDateChange">
          <el-option label="当前月份" value="currentMonth"></el-option>
          <el-option label="三月内" value="minus3Months"></el-option>
          <el-option label="一年内" value="minus1Year"></el-option>
          <el-option label="两年内" value="minus2Years"></el-option>
          <el-option label="三年内" value="minus3Years"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核人">
        <el-input v-model="searchParams.reviewerName" placeholder="请输入审核人名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
      
        <!-- 分页 -->
      <el-table
        :data="pageTicket"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="负责人"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
        >
        </el-table-column>
        <el-table-column
          prop="storeName"
          label="店铺名称"
        >
      </el-table-column>
        <el-table-column
          prop="addressName"
          label="地址"
        >
        </el-table-column>
      
        <el-table-column
          prop="corporate"
          label="法人"
        >
        </el-table-column>

        <el-table-column
          prop="latestSubmissionTime"
          label="最近提交时间"
          
        >
        </el-table-column>
        <!-- :formatter="dateFormat" -->
        <el-table-column
          prop="recentAuditDate"
          label="最近审核时间"
          
        >
        </el-table-column>
        <!-- :formatter="dateFormat" -->
        
        
        <el-table-column
          prop="stateName"
          label="状态名称"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
          v-if="scope.row.stateId===0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleReview(scope.row)"
          >审核</el-button>

        </template>
      </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { selectPage,selectStateList } from '@/api/store';
  import moment from 'moment'; // 引入moment.js进行日期格式化
  import { useRouter } from 'vue-router'; // 确保导入了useRouter
  
  export default {
    data() {
      return {
        pageTicket: [], // 分页后的当前页数据
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页行数
        total: 0, // 总数据条数

        searchParams: {
        id: '',
        username:'',
        phone: '',
        storeName: '',
        addressName: '',
        legalPerson: '',
        stateId:'',
        recentAuditDate:'',
        latestSubmissionTime:'',
      },
      // 审核状态数据
      stateList:[],

      };
    },
    methods: {
      stateList0(){
      selectStateList().then((response)=>{
        this.stateList=response.data
      }).catch(error=>console.error('Error fetching stateList data:', error))},
      // 获取分页数据
      getPageInfo() {
        const params = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          // ...其他可能需要的参数
          ...this.searchParams,
        };
        selectPage(params).then(response => {
          this.pageTicket = response.data.records; // 假设后端返回的数据中包含items字段
          this.total = response.data.total; // 假设后端返回的数据中包含total字段
        }).catch(error => {
          console.error('Error fetching page data:', error);
          // 处理错误情况
        });
      },
      handleSpecificDateChange(value) {
      let date = moment();
      switch (value) {
        case 'currentMonth':
          this.searchParams.latestSubmissionTime = date.format('YYYY-MM-DD');
          break;
        case 'minus3Months':
          this.searchParams.latestSubmissionTime = date.subtract(3, 'months').format('YYYY-MM-DD');
          break;
        case 'minus1Year':
          this.searchParams.latestSubmissionTime = date.subtract(1, 'years').format('YYYY-MM-DD');
          break;
        case 'minus2Years':
          this.searchParams.latestSubmissionTime = date.subtract(2, 'years').format('YYYY-MM-DD');
          break;
        case 'minus3Years':
          this.searchParams.latestSubmissionTime = date.subtract(3, 'years').format('YYYY-MM-DD');
          break;
        default:
          this.searchParams.latestSubmissionTime = '';
          break;
      }
    },
      // 搜索
      handleSearch() {
      this.currentPage = 1; // 重置当前页码
      this.getPageInfo(); // 重新获取数据
    },
      // 分页时修改每页的行数
      handleSizeChange(size) {
        this.pageSize = size;
        this.getPageInfo();
      },
      // 分页调整当前的页码
      handleCurrentChange(pageNumber) {
        this.currentPage = pageNumber;
        this.getPageInfo();
      },

      dateFormat(row, column, cellValue, index) {
      // 使用moment.js格式化日期
      return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:MM:SS') : '';
    },
    // 操作
    handleReview(row){
      console.log(row.stateId)
      // 跳转到另一个页面并携带参数
      this.$router.push({
        name: 'TargetPage', // 替换为目标页面的路由名称
        params: {
          id: row.id
        }
      });
    }
    },
    mounted() {
      this.getPageInfo();
      this.stateList0()

    }
  };
  </script>
  